<template>
    <MainLayout>
        <v-row class="next-lg mx-auto! my-8">
            <v-col cols="12" sm="12" md="7">
                <CollapseProduts title="Project lD: N87312" v-for="i in 2" :selectShow="false" :bodyStyle="{
                    background: '#fff',
                    borderTopRightRadius: '0',
                    borderTopLeftRadius: '0'
                }">
                    <!-- <ProductList :products="productList" @imageClick="openImage" /> -->
                    <template #rightIcon>
                        <span class="w-4 h-4 rounded-full mr-2  flex items-center justify-center mx-1" @click.stop="">
                            <Icons name="icon-download-2" class="text-[16px]! text-black-500!" />
                        </span>
                        <span class="w-4 h-4 rounded-full mr-2 flex items-center justify-center mx-1" @click.stop="">
                            <Icons name="icon-edit" class="text-[16px]! text-black-500!" />
                        </span>
                        <span class="w-4 h-4 rounded-full mr-2 flex items-center justify-center mx-1" @click.stop="">
                            <Icons name="icon-shanchu" class="text-[16px]! text-black-500!" />
                        </span>
                        <span
                            class="bg-gray-200 w-4 h-4 rounded-full mr-2 bg-green-500 flex items-center justify-center">
                            <Icons name="icon-selected" class="text-[10px]! text-white!" />
                        </span>
                    </template>
                    <template #other>
                        <div class="flex w-full! pt-4!">
                            <div class="flex-1 w-0 mr-2">
                                <SelectSize active variant="solo" label="Choose Quantity" />
                            </div>
                            <div class="flex-1 w-0">
                                <SelectSize active variant="solo" label="Choose Quantity" />
                            </div>
                        </div>
                    </template>
                    <template #btn>
                        <div @click.stop="() => { }">
                            <button class="w-full! bg-green-500 text-white px-4 py-2 rounded-lg">
                                Again Order
                            </button>
                        </div>
                    </template>
                </CollapseProduts>

                <div
                    class="mt-6 bg-white overflow-hidden text-black px-3 py-4  mx-2  items-center justify-between text-left relative rounded-lg">
                    <h5 class="text-[20px] font-bold text-center mb-4">Path to your products</h5>
                    <v-timeline direction="horizontal" truncate-line="both" side="end">
                        <v-timeline-item dot-color="#fff" v-for="i in timeLine">
                            <template v-slot:icon>
                                <img :src="i.img" alt="" class="w-[50px]! h-[50px]! bg-white" />
                            </template>
                            <template v-slot:opposite>
                                <span class="text-sm text-gray-500">
                                    {{ i.title }}
                                </span>
                            </template>
                            <div class="text-center">
                                <div class="text-4">
                                    {{ i.content }}
                                </div>
                                <p class="text-gray-500 text-3 mt-1">
                                    {{ i.remark }}
                                </p>
                            </div>
                        </v-timeline-item>
                    </v-timeline>

                </div>


                <div
                    class="mt-6 bg-white overflow-hidden text-black px-3 py-4  mx-2  items-center justify-between text-left relative rounded-lg">
                    <p class="text-gray-500 text-sm text-center">
                        It seems like you haven't added any products yet
                    </p>
                    <h5 class="text-[16px] font-bold text-center mb-2">Your Cart is Currently Empty</h5>
                    <div class="flex justify-center">
                        <v-btn elevation="0" color="#39c464" class="w-[80%]! text-white px-10!">
                            + Add another item
                        </v-btn>
                    </div>
                    <p class="text-gray-500 text-sm text-center">
                        Just one click to create a new order
                    </p>
                </div>
            </v-col>
            <v-col cols="12" sm="12" md="5">
                <!-- 添加订单摘要和商品列表 -->
                <Collapse title="Order Summary" :content="null" :selectShow="false" defaultOpen class="mt-6 mx-2"
                    :bodyStyle="{ background: '#fff' }" :buttonStyle="{ padding: '0 12px!important' }">
                    <template #title>
                        <span class="font-bold px-2">Order Summary</span>
                    </template>
                    <template #rightIcon>
                        <!-- <img src="/testImgs/icon/shopping.png" class="w-8 h-8" alt="" srcset=""> -->
                        <span></span>
                    </template>
                    <template #rightArrow>
                        <span class="transition-transform duration-300 rotate--180 text-[30px]!">
                            <Icons name="icon-allow-right" class="text-[20px]! font-bold! w-[12px] h-[12px]" />
                        </span>
                    </template>
                    <div class="px-4">
                        <div class="text-[16px] pt-2 border-t border-[1px] border-gray-100">
                            <div class="py-1 flex justify-between items-center  font-200">
                                <span class="text-gray-500">Items sub total ($)</span>
                                <span class="font-bold">$7,090.22</span>
                            </div>
                            <div class="py-1  flex justify-between items-center">
                                <span class="text-gray-500">Shipping</span>
                                <span class="text-green-600 font-bold">free</span>
                            </div>
                            <div class="py-1 flex justify-between items-center">
                                <div class="flex items-center">
                                    <span class="text-gray-500">Discount</span>
                                </div>
                                <span class="font-bold text-red-600 flex items-center justify-center">
                                    <img src="/testImgs/icon/50-percent.png"
                                        class="w-10 h-10 object-cover inline-block mr-2" alt="折扣标签" />
                                    -$758
                                </span>
                            </div>
                            <div class="py-1 flex justify-between items-center ">
                                <span class="text-gray-500">Total</span>
                                <span>
                                    <s class="text-gray-500 mr-2">$1200</s> $6,090.22
                                </span>
                            </div>
                        </div>

                        <div class="text-[18px] py-4 text-center ">
                            <v-btn elevation="0" color="#39c464" class="w-full! text-white px-10!">
                                + Add another item
                            </v-btn>
                            <p class="text-xs text-gray-500 mt-2 text-center">Your custom creation is completed. Just
                                one click
                                to
                                create a
                                new order.</p>
                        </div>
                        <div class="flex items-center px-2">
                            <div>
                                <img src="/transport.png" alt="" class="w-12! h-8!">
                            </div>
                            <div class="flex-1 w-0 px-2 flex justify-between  text-4">
                                <div class="flex-1 text-center">
                                    <div class="text-gray-500 mb-1">
                                        Free shipping
                                    </div>
                                    <div>
                                        Wed, May 21
                                    </div>
                                </div>
                                <div class="flex items-center justify-center">
                                    <div class="h-[1px] border-b-[1px] border-gray-300 border-solid w-[50px]"></div>
                                </div>
                                <div class="flex-1 text-center">
                                    <div class="text-gray-500 mb-1">
                                        Fastest
                                    </div>
                                    <div>
                                        Wed, Apr 30
                                    </div>
                                </div>
                            </div>
                        </div>
                        <EvaluateOther />
                        <v-btn elevation="0" color="#00ADEF" class="w-full! text-white px-10! mb-3">
                            check Out
                        </v-btn>
                        <v-btn elevation="0" color="#1E498C" class="w-full! text-white px-10! mb-3">
                            Back
                        </v-btn>
                    </div>
                </Collapse>

                <!-- 保证按时交付 -->
                <div class="mx-2 mt-6 mb-6 bg-white rounded-lg shadow-md overflow-hidden p-4">
                    <div class="flex flex-col items-center justify-center">
                        <h3 class="font-bold mb-2 flex items-center">
                            <img src="/transport.png" alt="" class="w-10! h-6! mr-4">
                            Guaranteed On-Time Delivery
                        </h3>
                        <p class="text-sm text-gray-600">With a 99.9% on-time delivery record, we meet our deadline,
                            ensuring your
                            product arrives on time for your event. Our customer support team is ready to assist with
                            any
                            delivery
                            concerns.
                        </p>
                    </div>
                </div>

                <!-- 客户帮助 -->
                <div class="mx-2 mt-6 mb-10 bg-white rounded-lg shadow-md overflow-hidden p-4">
                    <div class="flex  justify-center">
                        <div class="flex-1">
                            <div class="text-sm text-gray-600 text-center!">
                                Hello! If you have any questions, could use some help with your
                                design or
                                just can't decide between options, send me a message here in the chat! I'm here to help.
                            </div>
                            <div class="flex items-center justify-center items-center">
                                <img src="/testImgs/icon/image copy.png" class="w-15 h-12 mr-2 relative" alt=""
                                    srcset="">
                                <div class="w-[80%] bg-[#1D498C] text-5 text-white text-center mt-2 py-2 mb-4">
                                    We're here to help!
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </v-col>
        </v-row>
    </MainLayout>
</template>

<script setup lang="ts">
import { MainLayout } from '~/components/MainLayout';
import { Collapse, CollapseProduts } from '~/components/Collapse';
import EvaluateOther from '~/components/evaluate/evaluateOther.vue';
import { Icons } from '~/components/icons';
import SelectSize from '~/components/input/selectSize.vue';

const timeLine = ref([
    {
        title: 'within 24 hours',
        content: 'Sign off on the design',
        remark: 'Our world-class designers reach out if there’s work left to do.',
        img: '/shopingdetail/edi66t.png'
    },
    {
        title: '2-7 days',
        content: 'Approve the product',
        remark: 'Get a physical sample or approve virtually to save time.',
        img: '/shopingdetail/verified.png'
    },
    {
        title: '17 - 31 days',
        content: 'Get your delivery',
        remark: 'Receive your order with free tracked shipping and smile.',
        img: '/shopingdetail/box(1).png'
    },
])

const swiperList = [
    './testImgs/1.webp',
    './testImgs/2.webp',
    './testImgs/3.webp',
    './testImgs/5.webp',
    './testImgs/6.webp',
    './testImgs/8.webp',
]

// 转换为产品列表数据
const productList = swiperList.map((img, index) => ({
    id: index + 1,
    name: 'Chenille Patches',
    price: '$12.99',
    imageUrl: img,
    discount: index % 2 === 0, // 每隔一个产品显示折扣标签
}))

const openImage = (index: number) => {
    console.log('打开图片:', index);
    // 这里可以实现打开大图预览的逻辑
}

const onImageClick = (index: number) => {
    // openImage(index);
}
</script>


<style scoped lang="scss">
:deep(.v-selection-control) {
    width: 100% !important;

    .v-label {
        width: 100% !important;
    }
}

:deep(.v-timeline-item__opposite) {
    padding-block-end: 14px !important
}

:deep(.v-timeline-item__body) {
    padding-block-start: 14px !important
}

.transform-origin-left {
    transform-origin: left;
}
</style>